import './App.css'
import { lazy, Suspense } from "react"
// 导入路由相关依赖模块
import {
  BrowserRouter as Router,    // 路由容器
  NavLink,                    // 导航链接
  Route,                      // 路由规则
  Redirect,                   // 重定向
  Switch,                      // 唯一匹配
} from 'react-router-dom'
// 导入页面路由组件
import Login from './views/Login'
import Effect from './views/Effect'
// import Reg from './views/Reg'
// import Main from './views/Main'
// import NotFound from './views/NotFound'
const Reg = lazy(() => import('./views/Reg'))
const Main = lazy(() => import('./views/Main'))
const NotFound = lazy(() => import('./views/NotFound'))

function App () {

  return (
    <>
      {/* Router路由容器，包含路由相关的所有组件 */}
      <Router>
        {/* 添加导航链接 */}
        {/* <NavLink to="/">LOGO</NavLink> */}
        <nav>
          <NavLink to="/" exact>LOGO</NavLink>
          <NavLink to="/main">首页</NavLink>
          <NavLink to="/login">登录</NavLink>
          <NavLink to="/reg">注册</NavLink>
        </nav>
        {/* <Suspense fallback="正在加载中..."> */}
        <Suspense fallback={<Effect></Effect>}>
          <Switch>
            {/* 添加路由规则 */}
            {/* exact在Switch中必须添加，否则会导致匹配到重定向空组件 */}
            <Route path="/" exact>
              <Redirect to="/login" />
            </Route>
            {/* <Redirect path="/" to="/login" /> */}
            <Route path="/main" component={Main}></Route>
            <Route path="/login" component={Login}></Route>
            <Route path="/reg" component={Reg}></Route>
            {/* 404路由，模糊匹配剩余所有路径 */}
            <Route path="*" component={NotFound}></Route>
          </Switch>
        </Suspense>
      </Router>
    </>
  )
}

export default App
